<template>
  <div class="offLine-container">
    <div class="infoSales-container-item">
      <div class="channel-detail-select space-between">
        <el-form :inline="true"
                 class="demo-form-inline single-form-inline locationDetail pickerOption"
                 size="small"
                 v-if="selectFlag">
          <el-form-item label="地区">
            <el-select class="selectFont"
                       v-model="country"
                       placeholder="选择地区"
                       @change="getProvinceThis">
              <el-option class="selectFont"
                         v-for="(item,index) in area"
                         :key="index"
                         :label="item"
                         :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="省份">
            <el-select class="selectFont"
                       v-model="province"
                       placeholder="选择省份"
                       @change="getCityThis">
              <el-option class="selectFont"
                         v-for="(item,index) in provinceList"
                         :key="index"
                         :label="item"
                         :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="城市">
            <el-select class="selectFont"
                       v-model="city"
                       placeholder="选择城市"
                       @change="channelSels">
              <el-option class="selectFont"
                         v-for="(item,index) in cityLists"
                         :key="index"
                         :label="item"
                         :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-form :inline="true"
                 class="demo-form-inline single-form-inline  pickerOption"
                 size="small"
                 v-if="!selectFlag">
          <el-form-item>
            <el-select v-model="selectType"
                       placeholder=""
                       style="width: 150px;">
              <el-option label="店铺编号"
                         value="code"></el-option>
              <el-option label="店铺名称"
                         value="name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input v-if="selectType == 'code'"
                      style="width: 350px"
                      v-model="inputCode"
                      placeholder="请输入内容"
                      size="small"></el-input>
            <el-input v-else
                      style="width: 350px"
                      v-model="inputName"
                      placeholder="请输入内容"
                      size="small"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="small"
                       type="primary"
                       @click="findShop">查询</el-button>
          </el-form-item>
        </el-form>
        <el-month-select :date-start.sync="startDate"
                         :date-end.sync="endDate"
                         :date-change="dateSelect"></el-month-select>
        <div>
          <div class="toggle-select"
               @click="toggleSelect"><span v-if="selectFlag">精确查找</span><span v-else>组合条件查找</span></div>
        </div>
      </div>
      <circle-compent :detailCatagrayCount="detailCatagrayCount"
                      :detailProductCount="detailProductCount"
                      :detailOnLine="detailOnLine"
                      :detailOffLine="detailOffLine"
                      :titleName="titleName"></circle-compent>
      <div>
        <div class="tableContainer">
          <el-table :data="channelsReault"
                    style="width: 100%"
                    size="mini">
            <el-table-column width="80px"
                             prop="shopNumber"
                             label="门店编号">
            </el-table-column>
            <el-table-column prop="shopName"
                             label="门店名称">
            </el-table-column>
            <el-table-column prop="channelName"
                             label="所属渠道">
            </el-table-column>
            <el-table-column prop="city"
                             label="所属城市">
            </el-table-column>
            <el-table-column prop="province"
                             label="所属省份">
            </el-table-column>
            <el-table-column prop="region"
                             label="所属地区">
            </el-table-column>
            <el-table-column sortable
                             width="130"
                             prop="custoMerCount"
                             label="到店客数(人)">
            </el-table-column>
            <el-table-column prop="salesAverageCount"
                             label="月均销量(件)">
            </el-table-column>
            <el-table-column sortable
                             width="145"
                             prop="salesAverageAmount"
                             label="月均销额(万元)">
            </el-table-column>
            <el-table-column label="操作"
                             width="100">
              <template slot-scope="scope">
                <div class="opreator"
                     @click="detailRowSet(scope.row.shopIdString,scope.row.city+scope.row.area+scope.row.addressDetail)">查看详情</div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="paginationSet">
          <div class="pagination-container">
            <div class="toStart"
                 @click="setCurrentPage">首页</div>
            <el-pagination background
                           layout="prev, pager, next"
                           @current-change="getLists"
                           :current-page.sync="currentPage"
                           :total="totalCount">
            </el-pagination>
          </div>
        </div>
      </div>

    </div>
    <!--  详情Dialog  -->
    <detail-dialog :key="channelId"
                   :showdialog.sync="detailDialogTableVisible"
                   :channelId="channelId"
                   :address="address"></detail-dialog>
  </div>
</template>

<script>
import CircleCompent from 'router/marketSale/compentSet/circleCompent'
import mixins from 'utils/mixin'
import DetailDialog from './detailDialog'
import * as opreator from 'api/getData'
import ElMonthSelect from 'router/marketSale/compentSet/ElMonthSelect/el-month-select.vue'

export default {
  name: "off-line",
  mixins: [mixins.mixin],
  components: {
    CircleCompent,
    DetailDialog,
    ElMonthSelect
  },
  props: ['channelNum'],
  data () {
    const currentYear = new Date().getFullYear()
    const currentMonth = new Date().getMonth() + 1
    const currentMonthstr = currentMonth < 10 ? `0${currentMonth}` : `${currentMonth}`
    const startDate = `${currentYear - 1}-${currentMonthstr}`
    const endDate = `${currentYear}-${currentMonthstr}`
    return {
      channelsReault: [],
      detailCatagrayCount: '',
      detailProductCount: '',
      detailOnLine: '',
      detailOffLine: '',
      titleName: [
        '月均销量（万件）',
        '月均销额（万元）',
        '到店客数（人）'
      ],
      selectFlag: true,
      selectType: 'code',
      inputName: '',
      inputCode: '',
      currentPage: 1,
      detailDialogTableVisible: false,
      channelId: '',
      value6: '',
      totalCount: 1,
      startDate: startDate,
      endDate: endDate,
      address: '',
      flowCountTotal: ''
    }
  },
  mounted () {
    this.getData(this.startDate, this.endDate)
    this.getLists()
    this.getAreaThis()
  },
  methods: {
    channelSels () {
      this.getLists()
    },
    getAreaThis (region) {
      opreator.getChannelRegion({}).then(res => {
        this.area = ['全部', ...res.data]
        this.getProvinceThis(region)
      })
    },
    getProvinceThis (region) {
      opreator.getChannelProvince({ region }).then(res => {
        this.provinceList = ['全部', ...res.data]
        this.getCityThis()
      })
    },
    getCityThis () {
      opreator.getChannelCity({
        province: this.province,
        region: this.country
      }).then(res => {
        this.cityLists = ['全部', ...res.data]
        this.getLists()
      })
    },
    findShop () {
      this.country = '全国'
      this.province = null
      this.province = null
      this.city = null
      if (this.selectType == 'code') {
        this.inputName = null
      } else {
        this.inputCode = null
      }
      this.getLists()
    },
    getData (firstTime, lastTime) {
      let param = { firstTime: firstTime, lastTime: lastTime }
      opreator.circleNum(param).then(res => {
        this.detailCatagrayCount = (res.data.offlineAverageCount / 10000).toFixed(2)
        this.detailProductCount = (res.data.offlineAverageAmount / 10000).toFixed(2)
        this.detailOnLine = res.data.totalCustoMerCount
        this.$emit('update:channelNum', res.data.offlineChannelCount)
      })
    },
    getLists () {
      let param = {
        firstTime: this.startDate,
        lastTime: this.endDate,
        region: this.country == '全国' ? undefined : this.country,
        province: this.province == '全部' ? undefined : this.province,
        city: this.city == '全部' ? undefined : this.city,
        shopName: this.inputName,
        shopId: this.inputCode,
        pageNumber: this.currentPage
      }
      opreator.getShopList(param).then(res => {
        let { totalRecord = 0, list = [] } = res.data || {}
        this.totalCount = totalRecord
        this.channelsReault = list.map(v => {
          return { ...v, salesAverageAmount: Number(v.salesAverageAmount || '0.00') }
        })
      })
    },
    dateSelect (val) {
      this.getData(this.startDate, this.endDate)
      this.getLists()
    },
    detailRowSet (id, add) {
      this.detailDialogTableVisible = true
      this.channelId = id.toString()
      this.address = add
    },
    toggleSelect () {
      this.inputCode = null
      this.inputName = null
      this.selectFlag = !this.selectFlag
    },
    setCurrentPage () {
      this.currentPage = 1
      this.getLists()
    },
  }
}
</script>

<style scoped>
.channel-detail-select {
  display: flex;
}
.channel-detail-select .toggle-select {
  color: #409eff;
  line-height: 32px;
  cursor: pointer;
  text-align: right;
}
</style>
